<template>
  <div class="chart-div" ref="MyChart">11</div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    // shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x - 6, shape.y + 6]
    const c1 = [shape.x - 13, shape.y + 1]
    const c2 = [xAxisPoint[0] - 13, xAxisPoint[1]]
    const c3 = [xAxisPoint[0] - 6, xAxisPoint[1] + 4]
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath()
  }
})
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c1 = [shape.x - 6, shape.y + 6]
    const c2 = [xAxisPoint[0] - 6, xAxisPoint[1] + 4]
    const c3 = [xAxisPoint[0] + 2, xAxisPoint[1]]
    const c4 = [shape.x + 2, shape.y + 1]
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath()
  }
})
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x - 6, shape.y + 6]
    const c2 = [shape.x + 2, shape.y + 1]
    const c3 = [shape.x - 6, shape.y - 3]
    const c4 = [shape.x - 13, shape.y + 1]
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath()
  }
})
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)

const MAX = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
const VALUE = [0, 100, 24.2, 54.9, 74.5, 78.3, 19.0, 26.9, 90.8, 23.2, 56.2, 69.3, 79.5, 55.5]
let option = {
  legend: {
    show: true,
    data: [{
    name: '系列1',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
        color: 'red'
    }
}]
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params, ticket, callback) {
      const item = params[1]
      return item.name + ' : ' + item.value
    }
  },
  grid: {
    left: 10,
    right: 40,
    bottom: 20,
    top: 60,
    containLabel: true
  },
  xAxis: {
    // 类目轴
    type: 'category',
    data: [
      '立春',
      '雨水',
      '惊蛰',
      '春分',
      '清明',
      '谷雨',
      '立夏',
      '小满',
      '芒种',
      '夏至',
      '小暑',
      '大暑',
      '立秋',
      '处暑'
    ],
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white'
      }
    },
    offset: 10,
    axisTick: {
      show: false,
      length: 9,
      alignWithLabel: true,
      lineStyle: {
        color: '#7DFFFD'
      }
    },
    axisLabel: {
      show: true
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white'
      }
    },
    // 分隔线
    splitLine: {
      show: true,
      lineStyle: {
        color: '#203E74',
        type: 'dashed'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      fontSize: 12,
      color: '#717E9B'
    },
    boundaryGap: ['20%', '20%'],
    // 强制设置坐标轴分割间隔
    interval: 20,
    max: 100,
    min: 0,
    name: '单位：%',
    nameTextStyle: {
      color: '#A0ADC4'
    }
  },
  dataZoom: [
    {
      // 这部分是滑动功能的配置
      type: 'inside',
      // 只能平移，不能缩放
      zoomLock: true,
      startValue: 0,
      endValue: 8
    }
  ],
  series: [
    // 外柱
    {
      type: 'custom',
      renderItem: function (params, api) {
        const location = api.coord([api.value(0), api.value(1)])
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(47,102,192,.8)',
                stroke: '#1D82DC'
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(59,128,226,.1)',
                // 边框颜色
                stroke: '#1D82DC'
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(72,156,221,.1)',
                stroke: '#1D82DC'
              }
            }
          ]
        }
      },
      data: MAX
    },
    {
      type: 'custom',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)])
        var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(67,102,243,1)'
          },
          {
            offset: 1,
            color: 'rgba(47,102,192,.5)'
          }
        ])
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(67,102,243,1)'
              }
            }
          ]
        }
      },
      data: VALUE
    },
    {
      type: 'bar',
      itemStyle: {
        color: 'transparent'
      },
      tooltip: {},
      data: MAX,
    }
  ]
}
let MyChart = ref()
onMounted(() => {
  var myChart2 = echarts.init(MyChart.value)
  myChart2.setOption(option)
})
</script>

<style>
.chart-div {
  width: 500px;
  height: 300px;
  background-color: #0c1f5a;
}
</style>
